{include file="common/head"}
<link rel="stylesheet" href="/static/wangeditor/style.css">

<script>
    document.title = "新增文章"
</script>
<style>
    .layout {
        background-color: #fff;
    }

    #pay-box,
    #comType {
        display: none;
    }

    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100;
        /* 按需定义 */
    }

    #toolbar-container {
        border-bottom: 1px solid #ccc;
    }

    #editor-container {
        height: 300px;
    }
</style>
<div class="layui-container layui-padding-3 layout">
    <span class="layui-breadcrumb">
        <a href="{:url('/index/index/index')}">首页</a>
        <a href="{:url('/index/category/index')}">文章分类</a>
        <a><cite>发布文章</cite></a>
    </span>
    <h2 class="s-text">发布文章</h2>
    <form class="layui-form layui-form-pane" action="" lay-filter="add">
        <div class="layui-form-item">
            <div> <label class="layui-form-label">文章标题</label> </div>
            <div class="layui-input-block">
                <input id="title" type="text" name="title" lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <label class="layui-form-label" style="width: 200px;">文章主体内容</label>
        <div class="layui-form-item">
            <div id="editor—wrapper">
                <div id="toolbar-container"><!-- 工具栏 --></div>
                <div id="editor-container"><!-- 编辑器 --></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章介绍图</label>
            <div class="layui-input-block">
                <input type="hidden" value="{$Request.session.art_sign}">
                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                        <div id="ID-upload-demo-text"></div>
                    </div>
                    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
                <div>
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 上传
                    </button>
                    <button id="close-upload" type="button" style="display: none;"
                    class="layui-btn layui-btn-primary layui-border-green">取消上传</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章类型</label>
            <div class="layui-input-block type">
                <input type="radio" name="type" value="1" title="默认" checked>
                <input type="radio" name="type" value="0" title="回复">
                <input type="radio" name="type" value="2" title="付费">
                <input type="radio" name="type" value="3" title="悬赏">
            </div>
        </div>
        <div class="layui-form-item" id="comType">
            <label class="layui-form-label">评论设置</label>
            <div class="layui-input-block">
                <input type="radio" name="comType" value="1" title="所有人可看" checked>
                <input type="radio" name="comType" value="2" title="仅仅发布者可看">
            </div>
        </div>
        <div class="layui-form-item" id="pay-box">
            <div class="layui-inline">
                <label class="layui-form-label">所需积分</label>
                <div class="layui-input-inline">
                    <input type="text" name="score" lay-verify="required" value="0" placeholder="所需积分数量"
                        autocomplete="off" class="layui-input" min="1" step="1" lay-affix="number">
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">文章分类</label>
            <div class="layui-input-inline">
                <select name="category_id">
                    {volist name="categoryList" id="category"}
                    <option value="{$category.id}">{$category.category}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标签框</label>
            <div class="layui-input-block">
                {volist name="tapList" id="tap" key="k"}
                <input type="checkbox" name="tap_id[{$tap.id}]" lay-skin="tag" title="{$tap.tap}">
                {/volist}
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

{include file="common/bottom"}
<script>
    layui.use(
        function () {
            var layer = layui.layer
            var form = layui.form
            var upload = layui.upload;
            var element = layui.element;
            var $ = layui.$;
            load = layer.load(0, { shade: 0.7 })

            let img_path = ''
            $('#close-upload').click(function () {
                img_path = ''
                $('#ID-upload-demo-img').attr('src', '__IMG__/other/no-img.jpg');
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                layer.msg('设置成功', { shade: 0.4, time: 500 })
                $(this).hide()
            })
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: '/index/article/uploadImg',
                field: 'img_path',
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });
                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', { icon: 16, time: 0 });
                }, done: function (res) {
                    if (res.errno == undefined) {
                        return layer.msg("上传失败：" + res.errno, { icon: 5 })
                    }
                    if (res.errno > 0) {
                        return layer.msg('上传失败');
                        $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                    } else {
                        img_path = res.data.url
                        $('#close-upload').show()
                    }
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', { icon: 1 });
                    }
                }
            })
            form.on('submit(add)', function (data) {
                var field = data.field;
                field['content'] = editor.getHtml()
                field['img_path'] = img_path
                if (editor.isEmpty()) {
                    layer.msg('主内容不能为空', { icon: 5 })
                    editor.focus()
                    $('#comType').hide()
                    return false
                }

                $.post('/index/article/doAdd?sign=' + "{$Request.session.art_sign}", field, (res) => {
                    if (res.code == 200) {
                        layer.msg('发布成功', { icon: 6 })
                        editor.setHtml('')
                        $("button[type=reset]").trigger("click");
                        $('#ID-upload-demo-text').html('');
                        $('#ID-upload-demo-img').attr('src', '__IMG__/other/no-img.jpg');
                    } else {
                        layer.msg('发布失败：' + res.message, { icon: 5 })
                    }
                }, 'json')
                return false;
            });
            $(".type > .layui-form-radio").click(function () {
                $('#pay-box').hide()
                if ($(this).prev()[0]['title'] == '悬赏')
                    $('#comType').show()
                else
                    $('#comType').hide()

                if ($(this).prev()[0]['title'] == '付费' || $(this).prev()[0]['title'] == '悬赏')
                    $('#pay-box').show()
            })
        })
</script>

<script src="/static/wangeditor/index.js"></script>
<script>
    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = {
        placeholder: '请输入文章主体内容',
        onChange(editor) {
            const html = editor.getHtml()
        },
        MENU_CONF: {
            'uploadImage': {
                fieldName: 'img_path',
                server: '/index/article/uploadImg',
                onSuccess(file, res) {
                    if (res.errno == 0) {
                        layer.msg('图片上传成功', { time: 1200, icon: 6 })
                    }
                },
            }
        }
    }
    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })
    const toolbarConfig = {}
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple', // or 'simple'
    })
    setTimeout(() => {
        layer.close(load)
    }, 500)
</script>